<template>
  <div style="text-align: right; margin: 10px 0px">
    <!--    查询-->
    <el-button
      size="small"
      type="primary"
      @click="handleClick('chaxun')"
      v-if="buttonList.some((item) => item === 'chaxun')"
    >
      <i class="iconfont icon-chaxun" style="font-size: 13px"></i>
      查询
    </el-button>
    <!--    新增-->
    <el-button
      size="small"
      type="primary"
      @click="handleClick('xinzeng')"
      v-if="buttonList.some((item) => item === 'xinzeng')"
      v-permission="'create'"
    >
      <i class="iconfont icon-jia" style="font-size: 13px"></i>
      新增
    </el-button>
    <!--    重置-->
    <el-button
      size="small"
      class="primary_btn reset_btn"
      @click="handleClick('chongzhi')"
      v-if="buttonList.some((item) => item === 'chongzhi')"
    >
      <i class="iconfont icon-zhongzhi" style="font-size: 13px"></i>
      重置
    </el-button>
    <!--    导入-->
    <el-button
      size="small"
      class="primary_btn"
      @click="handleClick('daoru')"
      v-if="buttonList.some((item) => item === 'daoru')"
    >
      <i class="iconfont icon-daoru" style="font-size: 13px"></i>
      导入
    </el-button>
    <!--导出-->
    <el-button
      size="small"
      class="export_btn primary_btn"
      @click="handleClick('daochu')"
      v-if="buttonList.some((item) => item === 'daochu')"
    >
      <i class="iconfont icon-daochu" style="font-size: 13px"></i>
      导出
    </el-button>
    <!--批量删除-->
    <el-button
      size="small"
      class="warning_btn"
      @click="handleClick('piliangshanchu')"
      v-if="buttonList.some((item) => item === 'piliangshanchu')"
    >
      <i class="iconfont icon-shanchutianchong" style="font-size: 13px"></i>
      批量删除
    </el-button>
  </div>
</template>
<script>
export default {
  name: "headerButton",
  data() {
    return {};
  },
  computed: {
    buttonList() {
      return this.$pageConfig(this.$route.path).headerButtons
        ? this.$pageConfig(this.$route.path).headerButtons
        : [];
    },
  },
  created() {
  },
  methods: {
    handleClick(type) {
      this.$emit("headerButtonClick", type);
    },
  },
};
</script>

<style scoped lang='scss'>
.warning_btn {
  background: #fde6df;
  border: 1px solid #f2734c;
  font-weight: 400;
  color: #666;

  i {
    color: #f2734c;
  }

  &:hover {
    background: #fddfd6;
  }
}

.primary_btn {
  background: #ecf5ff;
  border: 1px solid #409eff;
  font-weight: 400;
  color: #666;

  i {
    color: #409eff;
  }

  &:hover {
    background: #cedae9 !important;
  }
}
</style>
